<template>
 	<div class="system_type_temp">
 		<div class="systemcontent">
 			<h3>模板名称</h3>
 			<div class="left_add_btn">
 				<el-card class="box-card" shadow="hover">
				  <div slot="header" class="clearfix">
				    <span>可添加模板数据 <el-switch v-model="is_vaild" active-text="有效" inactive-text="无效"></el-switch><sub style="font-size：10px;color:#ccc;margin-left: 10px;">此效果仅供参考</sub></span>
				    <el-button style="float:right;padding: 3px 0;color: #F56C6C;" v-show="!addTemModal.group" @click="saveAllItem" type="text">保存此模板</el-button>
				    <el-button style="float:right;padding: 3px 0" v-show="addTemModal.group" @click="addTemModal.group = false;" type="text">保存分组</el-button>
				  </div>
				  <p v-for="item in templateType" @click="checkAddModal(item)"><el-button :class="{'yellow':addTemModal.group}" style="padding: 3px 0" type="text">{{item.describ}}组件</el-button></p>
				  <p><el-button :class="{'yellow':addTemModal.group}" @click="addApprovalCopy('approval')" style="padding: 3px 0" type="text">审批人选择</el-button></p>
				  <p><el-button :class="{'yellow':addTemModal.group}" @click="addApprovalCopy('copy')" style="padding: 3px 0" type="text">抄送人选择</el-button></p>
				  <p><el-button style="padding: 3px 0" type="text" v-if="!addTemModal.group" @click="checkAddModal('group')">进入分组编辑模式</el-button></p>
				</el-card>
 			</div>
 		</div>
 		<div class="systemright">
 			<div class="phone">
	 			<div class="phone-content">
	 				<h4  style="padding: 10px 5px;margin: 0;background-color: #409EFF;color: #fff;">模板展示</h4>
	 				<div class="allShowList" >
	 					<div v-if="allShowPhoneList.length <=0" class="emit">
	 						这里添加数据
	 					</div>
	 					<template  v-for="(item,index) in allShowPhoneList">
	 						<div class="group_title" v-show="item.group">
		 						<span>{{item.groupName}}</span>
		 						<span @click="delGroup(index)" style="color: #409EFF;cursor: pointer;">删除</span>
		 					</div>
		 					<template v-for="(ite,idx) in item.list">
		 					<div class="list flex_space" v-if="ite.type == 'text'">
		 						<span class="red">*</span><span>{{ite.name}}</span><input v-model="ite.value" type="text" placeholder="请输入文本" value="" />
		 						<i @click="delItem(item.group,index,idx)" style="color: red;" class="pos_icon el-icon-circle-close-outline"></i>
		 					</div>
		 					<div class="list flex_space poin" v-if="ite.type == 'single_choice'" >
		 						<span class="red">*</span>
		 						<span>{{ite.name}}</span>
		 						<span class="right gray">请选择 <i class="el-icon-arrow-right"></i></span>
		 						<i @click="delItem(item.group,index,idx)" style="color: red;" class="pos_icon el-icon-circle-close-outline"></i>
		 					</div>
		 					<div class="list flex_space poin" v-if="ite.type == 'date'">
		 						<span class="red">*</span>
		 						<span>{{ite.name}}</span>
		 						<span class="right gray">请选择 <i class="el-icon-arrow-right"></i></span>
		 						<i @click="delItem(item.group,index,idx)" style="color: red;" class="pos_icon el-icon-circle-close-outline"></i>
		 					</div>
		 					<div class="list flex_space" v-if="ite.type == 'number'">
			 					<span class="red">*</span><span>{{ite.name}}</span><input type="number" v-model="ite.value" placeholder="请输入数字" value="" />
			 					<i @click="delItem(item.group,index,idx)" style="color: red;" class="pos_icon el-icon-circle-close-outline"></i>
			 				</div>
			 				<div class="list " v-if="ite.type == 'textarea'">
			 					<span class="red">*</span><span>{{ite.name}}</span>
			 					<p contenteditable="true" ref="textarea" placeholder="请输入" class="textarea text">{{ite.value}}</p>
			 					<i @click="delItem(item.group,index,idx)" style="color: red;" class="pos_icon el-icon-circle-close-outline"></i>
			 				</div>
			 				<div class="list " v-if="ite.type == 'file'">
			 					<span class="red">*</span><span>{{ite.name}}</span>
			 					<div class="upadte_file">
			 						<i style="margin-top: 10px;" class="el-icon-plus avatar-uploader-icon"></i>
			 					</div>
			 					<i @click="delItem(item.group,index,idx)" style="color: red;" class="pos_icon el-icon-circle-close-outline"></i>
			 				</div>
			 				</template>
			 				<div class="add_group" @click="addCheckBlock(index)" v-show="item.group">
			 					<i class="el-icon-plus" style="color: #409EFF;"></i>
			 					<span style="color: #409EFF;">增加{{item.groupName}}</span>
			 				</div>
	 					</template>
	 					
	 					
	 					<!-- 审批 抄送显示 -->
		 				<div class="list">
		 					<span class="red">*</span><span>审批人</span><span class="sub">审批人已由管理员预制并将自动去重</span>
		 					<div>
		 						<el-row style="padding-top: 10px;">
								  <el-col  :span="6" style="margin-bottom: 10px;" v-for="(ite,idx) in approvalList">
								  	<div class="phone_li-grid">
								  		<div class="user_show">
								  			<img :src="ite.alias ? ite.alias : require('@/assets/images/empty_user.png')" alt="" />
								  			<span style="">{{ite.alias}}</span>
								  		</div>
								  		<i v-if="idx < approvalList.length-1" style="font-size: 10px;color: #666;" class="fa fa-arrow-right"></i>
								  		<i style="color: red;" @click="delApproveOrCopy('approval',idx)" class="pos_icon_top el-icon-circle-close-outline"></i>
								  	</div>
								  </el-col>
								</el-row>
		 					</div>
		 				</div>
		 				
		 				
		 				<!--审批抄送显示  -->
		 				<div class="list">
		 					<span class="red">*</span><span>抄送人</span><span class="sub">审批通过后，通知抄送人</span>
		 					<div>
		 						<el-row style="padding-top: 10px;">
								  <el-col  :span="6" style="margin-bottom: 10px;" v-for="(ite,idx) in copyList">
								  	<div class="phone_li-grid">
								  		<div class="user_show">
								  			<img :src="ite.alias ? ite.alias : require('@/assets/images/empty_user.png')" alt="" />
								  			<span style="">{{ite.alias}}</span>
								  		</div>
								  		<i  @click="delApproveOrCopy('copy',idx)" style="color: red;" class="pos_icon_top el-icon-circle-close-outline"></i>
								  	</div>
								  </el-col>
								</el-row>
		 					</div>
		 				</div>
		 				
	 				</div>
	 				<div class="footer" >
	 					<el-button @click="submitLocal" style="width: 100%;" type="primary">提交</el-button>
	 				</div>
	 			</div>
	 			<div class="statusbar"></div>
	 		</div>
 		</div>
 		
 		
 		<!--添加定制化类型框-->
 		<el-dialog
		  title="添加模板类型"
		  :visible.sync="addTemModal.visible"
		  width="30%"
		  :before-close="handleClose">
		  <p>
		  	<span style="color: red;">*</span>
		  	<span>{{addTemModal.describ}}名称：</span>
		  	<el-input v-model="addTemModal.name" type="text" style="width: 200px;"></el-input>
		  </p>
		  <span  v-if="addTemModal.type == 'text' || addTemModal.type == 'number' ">添加默认数据字段:</span>
		  <el-input v-model="addTemModal.value"  v-if="addTemModal.type == 'text' " type="text" style="width: 200px;"></el-input>
		  <el-input v-model="addTemModal.value"  v-if="addTemModal.type == 'number'" type="number" style="width: 200px;"></el-input>
		  <!--单选选项添加-->
	 		<div class="fill" v-if="addTemModal.type == 'single_choice'" style="margin-top: 20px;">
	 			<inPanelTitle tipdesc="参考" introdesc="请添加单选选择字段"></inPanelTitle>
	 				<div v-for="(item,index) in addTemModal.options" class="el-input__inner">
	 					<el-tag closable @close="optionRemove(index)">{{item}}</el-tag>
	 				</div>
	 			<el-input  style="margin:10px 0px 10px 0px; width: 95%;" v-model="options_input" placeholder="请输入内容"></el-input>
	 			<div class="add_icon" @click="addOptionList" >
	 				<i class="fa fa-plus fa-lg" style="transform: translateY(1px);"></i>
	 				<span>添加一个选项</span>
	 			</div>
	 		</div>
		  <p>
		  	<el-switch
			  v-model="addTemModal.is_must"
			  active-text="必填项"
			  inactive-text="非必填项">
			</el-switch>
		  </p>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addTemModal.visible = false">取 消</el-button>
		    <el-button type="primary" @click="addAllModalData">添 加</el-button>
		  </span>
		</el-dialog>
		
		
		
		
		<!--添加审批人 抄送人-->
		<el-dialog
		  :title="approvalOrCopy.name"
		  :visible.sync="approvalOrCopy.visible"
		  width="30%"
		  :before-close="handleClose"
		>
			 <el-table
			    ref="multipleTable"
			    :data="approvalOrCopy.alldata"
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
			    <!--<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>-->
			    <el-table-column
			      prop="alias"
			      label="姓名"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      label="账号"
			      width="120">
			      <template slot-scope="scope">{{ scope.row.user }}</template>
			    </el-table-column>
			    <el-table-column
			      label="身份"
			      show-overflow-tooltip>
			      <template slot-scope="scope">{{ getUserDes(scope.row.business_role) }}</template>
			    </el-table-column>
			    <el-table-column
			      label=""
			      show-overflow-tooltip>
			      <template slot-scope="scope"><el-button type="parmise" size="mini" @click="addSelectionChange(scope.row)">添加审批流</el-button></template>
			    </el-table-column>
			  </el-table>
			   <span slot="footer" class="dialog-footer">
			    <!--<el-button @click="approvalOrCopy.visible = false">取 消</el-button>-->
			    <el-button type="primary" @click="addApprovelCopyData">添 加</el-button>
			   </span>
		</el-dialog>
 	</div>
</template>

<script>
    import { userGetAll,Login} from '@/assets/util/api.js'
    import { approveUpdateTypeTemplate,approveGetTemplateDetail } from '@/assets/util/approve_api.js'
  import { getUrlHost } from '@/assets/util/util_base.js'
  export default {
    data() {
      return {
      	templateType:[{type:"single_choice",describ:"单选框"},{type:"text",describ:"单行文本框"},{type:"textarea",describ:"多行文本框"},{type:"date",describ:"日期"},{type:"number",describ:"数字文本框"},{type:"file",describ:"上传文件"}],
      	base_url:getUrlHost(),
      	allShowPhoneList:[],
      	access_token:"",
      	addTemModal:{
      		visible:false,
      		describ:"初始化名字",
      		type:"初始化类型",
      		name:"",//设置时绑定的名称
      		value:"",
      		is_must:true,
      		options:[],
      		group:false,
      		groupName:"",
      	},
      	approvalOrCopy:{
      		visible:false,
      		name:"",
      		type:"",
      		alldata:"",//获取到的所有人员数据
      		checkData:[],
      	},
      	approvalList:[],//审批人列表
      	copyList:[],//抄送人列表
      	options_input:"",
      	is_vaild:true,
      	pubi:0,
      };
      
    },
    watch:{
    	approvalList(){},
    	copyList(){},
    	approvalOrCopy:{
    		checkData(){},
    	},
    	'$route' (to, from) {
//  		if(this.pubi == 0){
//  			++this.pubi
//  		}else{
//  			this.pubi = 0;
//  			return;
//  		}
    		this.approveGetTemplateDetail();
    	},
    },
    mounted(){
      var _this = this;
      this.access_token = this.inStorage("get","access_token");
      if(!!document.querySelectorAll(".textarea")[0]){
      	let textarea = document.querySelectorAll(".textarea")[0]
	      textarea.addEventListener("input",function(){
	      	if(_this.$refs.textarea.innerText.length>0){
	      		if(textarea.classList.contains("text")){
	      			textarea.classList.remove("text");
	      		}
	      	}else{
	      		if(!textarea.classList.contains("text")){
	      			textarea.classList.add("text");
	      		}
	      	}
	      })
      }
      
      //获取所有人的数据
      this.getAllUser();
      
//      if(this.pubi == 0){
//  		++this.pubi
//  	}else{
//  		this.pubi = 0;
//  		return;
//  	}
      this.approveGetTemplateDetail();
//    console.log("转入数据转入数据转入数据",JSON.parse(this.$route.query.params));
    },
    methods: {
     submitLocal(){
     	
     },
     //获取所有的模板数据
     approveGetTemplateDetail(){
     	var _this = this;
     	let queryUrl = JSON.parse(this.$route.query.params);
     	var params = {
     		access_token:this.access_token,
     		name:queryUrl.Info.name,
     		type_name:queryUrl.parent.name,
     	}
     	approveGetTemplateDetail(this,params).then(res=>{
     		console.log(res);
     		if(res.data.state){
     			_this.approvalList = res.data.data.approvers;
     			_this.copyList = res.data.data.copyers;
     			
     			var allShowPhoneList = JSON.parse(res.data.data.widget_info);
     			
     			console.log(typeof allShowPhoneList)
			    if(allShowPhoneList && typeof allShowPhoneList == "object"){
			      	_this.allShowPhoneList = allShowPhoneList;
			    }else{
			    	_this.allShowPhoneList = [];
			    }
     			_this.inStorage("set","allShowPhoneList",_this.allShowPhoneList);
     			_this.inStorage("set","approvalList",_this.approvalList);
     			_this.inStorage("set","copyList",_this.copyList);
     		}
     	}).catch(res=>{
     		console.log(res);
     	})
     },
     //全局过滤器element中无法使用，封装一层。
     getUserDes(value){
     	return this.$options.filters.getUserDes(value)
     },
     //根据不同组件类型切换
     checkAddModal(item){
     	console.log(this.addTemModal.type)
     	if(item!='group'){
     		this.addTemModal.type = item.type;
     		this.addTemModal.visible = true;
	     	this.addTemModal.describ = item.describ;
     	}else{
     		this.addTemModal.type = item;
     	}
     	switch (this.addTemModal.type){
     		case "single_choice":
     			break;
     		case "text":
     			break;
     		case "textarea":
     			break;
     		case "date":
     			break;
     		case "number":
     			break;
     		case "file":
     			break;
     		case "group":
     		this.showAddModal();
     		
     		console.log(this.addTemModal.group);
     			break;
     		default:
     			break;
     	}
     },
     //显示添加分组模式
     showAddModal(){
     	this.$prompt('请输入分组名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
        	console.log(value);
          this.addTemModal.groupName = value;
          this.addTemModal.group = true;
          this.$notify.info({
	          title: '消息',
	          message: '您已进入分组编辑模式，如需复原请保存当前编辑。',
	      });
        }).catch(() => {});
     },
     //添加所有模态框的值
     addAllModalData(){
     	if(this.addTemModal.group){
     		console.log("第几个值",this.allShowPhoneList[this.allShowPhoneList.length-1]);
     		console.log(this.allShowPhoneList.length)
     		if(this.allShowPhoneList.length-1 < 0){
     			var addTemModal = Object.assign({},this.addTemModal);
     			var groupState = this.addTemModal.group;
     			var groupName = this.addTemModal.groupName;
     			this.allShowPhoneList.push({group:groupState,groupName:groupName,list:[addTemModal]})
     			console.log(this.allShowPhoneList);
     			this.addTemModal.visible = false;
     			this.addTemModal={
	      			visible:false,
		      		describ:"初始化名字",
		      		type:"初始化类型",
		      		name:"",//设置时绑定的名称
		      		value:"",
		      		is_must:true,
		      		options:[],
		      		group:true,
		      		groupName:"",
		      	};
     			return;
     		}
     		if(this.allShowPhoneList[this.allShowPhoneList.length-1].group && this.allShowPhoneList[this.allShowPhoneList.length-1].groupName == this.addTemModal.groupName){
     			var list = this.allShowPhoneList[this.allShowPhoneList.length-1];
     			var addTemModal = Object.assign({},this.addTemModal);
     			list.list.push(addTemModal);
     			console.log(list);
     			this.allShowPhoneList.splice(this.allShowPhoneList.length-1,1,list);
     			console.log(this.allShowPhoneList)
     		}else{
     			var addTemModal = Object.assign({},this.addTemModal);
     			var groupState = this.addTemModal.group;
     			var groupName = this.addTemModal.groupName;
     			this.allShowPhoneList.push({group:groupState,groupName:groupName,list:[addTemModal]})
     			console.log(this.allShowPhoneList);
     		}
     		this.addTemModal={
	      		visible:false,
	      		describ:"初始化名字",
	      		type:"初始化类型",
	      		name:"",//设置时绑定的名称
	      		value:"",
	      		is_must:true,
	      		options:[],
	      		group:true,
	      		groupName:groupName,
	    	};
     	}else{
     		var addTemModal = Object.assign({},this.addTemModal);
     		var groupState = this.addTemModal.group;
     		this.allShowPhoneList.push({group:groupState,list:[addTemModal]});
     		console.log(this.allShowPhoneList);
     		this.addTemModal={
	      		visible:false,
	      		describ:"初始化名字",
	      		type:"初始化类型",
	      		name:"",//设置时绑定的名称
	      		value:"",
	      		is_must:true,
	      		options:[],
	      		group:false,
	      		groupName:"",
	    	};
     	}
     	
     	this.addTemModal.visible = false;
     },
     //增加一个分组
     addCheckBlock(index){
     	var strIdx = Object.assign({},this.allShowPhoneList[index]);
     	this.allShowPhoneList.splice(index,0,strIdx)
     },
     addApprovelCopyData(){
     	this.approvalOrCopy.visible = false;
     },
     //删除分组
     delGroup(index){
     	this.allShowPhoneList.splice(index,1)
     },
     //删除元素
     delItem(groupstate,index,idx){
     	if(!groupstate){
     		this.allShowPhoneList.splice(index,1)
     	}else{
     		this.allShowPhoneList[index].list.splice(idx,1)
     	}
     },
     //删除审批流中某个值
     delApproveOrCopy(item,idx){
     	switch (item){
     		case "approval":
     		this.approvalList.splice(idx,1);
     		break;
     		case "copy":
     		this.copyList.splice(idx,1);
     		break;
     	}
     },
     addOptionList(){
     	if(!!this.options_input){
     		this.addTemModal.options.push(this.options_input);
     		this.options_input = ""
     	}
     },
     //显示模态框
     addApprovalCopy(item){
     	this.approvalOrCopy.type = item;
     	switch (item){
     		case "approval":
     		this.approvalOrCopy.visible = true;
     		this.approvalOrCopy.name = "添加审批人";
     		this.approvalOrCopy.checkData = this.approvalList;
     		break;
     		case "copy":
     		this.approvalOrCopy.visible = true;
     		this.approvalOrCopy.name = "添加抄送人";
     		this.approvalOrCopy.checkData = this.copyList;
     		break;
     		default:
     		this.approvalOrCopy = {
	      		visible:false,
	      		name:"",
	      		type:"",
	      	};
     		break;
     	}
     },
      //获取所有选择的值
     addSelectionChange(val){
     	if(this.approvalOrCopy.type == 'approval'){
     		if(this.approvalList.length == 0){
     			this.approvalList.push(val);
     			return;
     		}
     		if(this.approvalList[this.approvalList.length-1].user == val.user){
     			return;
     		}else{
     			this.approvalList.push(val);
     		}
     	}else if(this.approvalOrCopy.type == 'copy'){
     		if(this.copyList.length == 0){
     			this.copyList.push(val);
     			return;
     		}
     		
     		if(this.copyList[this.copyList.length-1].user == val.user){
     			return;
     		}else{
     			this.copyList.push(val);
     		}
     	}
     },
     //获取所有人员的数据
     getAllUser(){
     	var _this = this;
     	var params = {
     		access_token:this.access_token,
     		user_name:"",
     		alias:"",
     		role:"",
     	}
     	userGetAll(this,params).then((res)=>{
     		if(res.data.code){
     			if(res.data.code == 1006){
     				_this.RouterTo(_this,"/")
     			}else{
     				_this.$message.error(_this.publicMsg(res.data.code),res.data.message);
     			}
     		}
     		if(res.data.state){
     			_this.approvalOrCopy.alldata = res.data.data.all;
     			_this.approvalOrCopy.alldata.push({user:"?",alias:"直系上级",url:""});
     		}
     	}).catch(res=>{
     		console.log(res);
     	})
     	this.approvalOrCopy.alldata = "";
     },
     //保存所有数据
     saveAllItem(){
     	this.inStorage("set","allShowPhoneList",this.allShowPhoneList);
     	this.inStorage("set","approvalList",this.approvalList);
     	this.inStorage("set","copyList",this.copyList);
     	if(!this.allShowPhoneList.forEach){
     		this.$message.error("审批内容未编辑！");
     		return;
     	}
     	let copyList = [];
     	this.copyList.forEach((str,idx,arr)=>{
     		copyList.push(str.user);
     	})
     	
     	let approvalList = [];
     	this.approvalList.forEach((str,idx,arr)=>{
     		approvalList.push(str.user);
     	})
     	
     	let widget_info = [];
     	this.allShowPhoneList.forEach((str,idx,arr)=>{
     			widget_info.push(str)
     	})
     	widget_info= JSON.stringify(widget_info);
//   	console.log(approvalList)
//   	console.log(copyList)
//   	console.log(this.allShowPhoneList);
//   	console.log(this.$route.query.params);
//   	console.log(JSON.parse(this.$route.query.params));
     	this.approveUpdateTypeTemplate(widget_info,approvalList,copyList)
     },
     //提交保存的数据
     approveUpdateTypeTemplate(widget_info,approvalList,copyList){
     	var _this = this;
     	let is_vaild = this.is_vaild ? 1 : -1;
     	let temp_type = JSON.parse(this.$route.query.params);
     	var params ={
     		access_token:this.access_token,
     		type_name:temp_type.parent.name,//模板类型
     		name:temp_type.Info.name,
     		url:temp_type.Info.url,
     		widget_info:widget_info,
     		approvers:approvalList,//多个审批人
     		copyers:copyList,//多个抄送人
     		attach:"",//附加
     		is_vaild:is_vaild,//
     	}
     	approveUpdateTypeTemplate(this,params).then(res =>{
     		console.log(res)
     		if(res.data.state){
     			_this.$message.success("编辑成功！");
     			_this.RouterTo(_this,"/approveSystemType");
     		}
     	}).catch(res => {
     		console.log(res);
     	})
     },
     //删除某一个元素
     optionRemove(index){
     	this.addTemModal.options.splice(index,1);
     },
    }
  }
 
</script>
<style lang="scss" scoped>
  .system_type_temp{
  	width: 100%;
  	.systemcontent{
  		width: 50%;
  		float: left;
  		padding-right: 10px;
  		box-sizing: border-box;
  	}
  	.systemright{
  		width: 50%;
  		float: right;
  	}
  	.phone{
  		margin: 0 auto;
	    position: relative;
	    background: #111;
	    border-radius: 55px;
	    box-shadow: 0px 0px 0px 2px #aaa;
	    width: 320px;
	    height: 568px;
	    padding: 105px 25px;
	    -webkit-box-sizing: content-box;
	    box-sizing: content-box;
	    .statusbar{
	    	position: absolute;
		    width: 320px;
		    height: 20px;
		    background: url(../../assets/images/phone-tab.png);
		    left: 50%;
		    margin-left: -160px;
		    top: 100px;
		    -webkit-background-size: 100% auto;
		    background-size: 100% auto;
	    }
	    .phone-content{
	    	width: 320px;
	    	overflow: auto;
	    	position: relative;
	    	/*padding-bottom:60px;*/
	    	box-sizing: border-box;
		    height: 100%;
		    display: block;
		    width: 100%;
		    margin-top: 20px;	
		    background-color: #F3F3F3;
	    }
  	}
  	.phone:before {
	    content: '';
	    width: 60px;
	    height: 10px;
	    border-radius: 10px;
	    position: absolute;
	    left: 50%;
	    margin-left: -30px;
	    background: #333;
	    top: 50px;
	}	
	.footer{
		/*position: absolute;*/
		/*bottom:0;
		left: 0;*/
		width: 100%;
		height: 60px;
		padding: 5px;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
  }
  .allShowList{
  	.emit{
  		width: 100%;
  		height:120px;
  		color: #333;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  	}
  	.list{
  		position: relative;
	    padding: 11px 25px;
	    overflow: hidden;
	    -webkit-touch-callout: none;
	    border-bottom: 1px solid #F3F3F3;
	    background-color: #fff;
	    .sub{
	    	font-size: 10px;
	    	color:#ccc;
	    }
	    .red{
	    	color: red;
	    	position: absolute;
	    	left: 5px;
	    }
	    .gray{
	    	color: #ccc;
	    }
	    .poin{
	    	cursor: pointer;
	    }
	    .right{
	    	float: right;
	    }
	    input{
	    	border: none;
	    	outline: none;
	    	width: 50%;
	    	float: right;
	    	height: 100%;
	    	text-align: right;
	    }
	    .avatar-uploader-icon {
		    font-size: 28px;
		    color: #8c939d;
		    width: 80px;
		    height: 80px;
		    line-height: 80px;
		    text-align: center;
		    border: 1px dashed #d9d9d9;
		    border-radius: 6px;
		    cursor: pointer;
		    position: relative;
		    overflow: hidden;
		}
	    .textarea{
	    	outline: none;
	    	position: relative;
	    	&.text::after  {
			    content: attr(placeholder);
			    position: absolute;
			    top: 0;
			    color: #a9a9a9;
			}
	    }
	    .flex_space{
	    	display: flex;
		    justify-content: space-between;
		    align-items: center;
	    }
	    .phone_li-grid{
	    	position: relative;
		    display: flex;
		    cursor: pointer;
		    justify-content: center;
		    align-items: center;
		    .user_show{
		    	display: flex;
		    	justify-content: center;
			    align-items: center;
			    flex-direction: column;
		    }
		    img{
		    	width: 45px;
		    	height:45px;
		    	border-radius: 50%;
		    }
		    span{
		    	margin-top: 5px;
		    	color: #666;
		    	font-size: 8px;
		    	white-space: nowrap;
		    }
		}
		.pos_icon{
			position: absolute;
			right: 2px;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
		}
		.pos_icon_top{
			position: absolute;
			right: 2px;
			top: 2px;
			cursor: pointer;
		}
  	}
  	.add_group{
  		width: 100%;
  		height: 40px;
  		background-color: #fff;
  		margin-bottom: 10px;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		cursor: pointer;
  		i{
  			margin-right:5px ;
  		}
  	}
  	.group_title{
  		display: flex;
  		padding:0 10px;
  		align-items: center;
  		justify-content: space-between;
  		height: 40px;
  		span{
  			font-size:12px;
  			color: #666;
  		}
  	}
  }
  
  .add_icon{
  		background: #A9B3BF;
	    border-radius: 4px;
	    color: #fff;
	    padding: 10px 0;
	    width: calc(100% - 48px);
	    border:none;
	    cursor: pointer;
	    display: flex;
	    justify-content: center;
	    align-items: center;
  	}
  	.add_icon:focus{
  		box-shadow: 0 10px 10px 10px -10px #ffff;
  	}
  	.fill div.el-input__inner{
  		background-color: #EBEEF5;
  		border: 1px solid #EBEEF5;
  		width: 95%;
  		margin:5px 0px 5px 0px;
  	}
  	.fill .el-input__inner:hover{
  		border: 1px solid #EBEEF5;
  	}
  	.yellow{
  		color: #E6A23C;
  	}
</style>

